<template>
    <div>
        <a-row type="flex" justify="space-around" style="margin-top: 5%">

            <a-col :span="8">
                <RankCascader/>
            </a-col>
            <a-col :span="6" >
                <RankSelect style="margin-left: -20%"/>
            </a-col>
            <a-col :span="4">
                <a-button type="primary" size="large" style="font-size: 18px;margin-left: -65% ;margin-top: 3px" @click="change">
                    查询
                </a-button>
            </a-col>
            <a-col :span="5" >
               <span style="font-size: 22px;margin-left: -55%">我的排名：</span>
                <span style="font-size: 22px">{{this.$store.state.rank.studentRank.stuRank===0||this.$store.state.rank.studentRank.stuRank===null||this.$store.state.rank.studentRank.stuRank===undefined?'未上榜':this.$store.state.rank.studentRank.stuRank}}</span>
            </a-col>

        </a-row>
        <a-row type="flex" justify="space-around" style="margin-top: 3%">
            <a-col span="2"></a-col>
            <a-col span="20">  <RankList ref="rankTable"/>   </a-col>
            <a-col span="2"></a-col>
        </a-row>
    </div>
</template>

<script>
    import RankCascader from "@/components/content/rank/RankCascader";
    import RankSelect from "@/components/content/rank/RankSelect";
    import RankList from "../components/content/rank/RankList";
    export default {
        name: "rank",
        components:{
            RankCascader,
            RankSelect,
            RankList
        },

        methods:{
            change(){
                this.$refs.rankTable.loading = true;
                this.$store.dispatch('rank/getRanking',1).then(res=>{
                    if(res.code===1){
                        if(this.$store.state.rank.rankData.type  === '0'){
                            alert("请输入排名方式")
                        }
                        this.$refs.rankTable.loading = false;
                    }else {
                        this.$message.error('网络异常')
                    }
                }).catch(()=>{
                    this.$message.error("网络异常")
                })

            },
        }
    }
</script>

<style scoped>

</style>